@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;0,600;0,800;1,700&family=Work+Sans:wght@400;500&display=swap');



*{
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
    font-family: 'Work Sans', sans-serif;
}

:root{
    --heading:rgb(0 10 45);
    --para:#777777;
     --para-tint:#e4e4e4;
     --white:#fff;
     --black:#212529;   
     --helper:#8490ff;
     --helper-tint:#f3f4ff;
     --bg:rgb(249 249 255);
     --gradient:linear-gradient(0deg , rgb(132 144 255)0% , rgb(98 189 252 )100%);
      
     --gradientSupport: -webkit-linear-gradient(
        0deg,
        rgb(132 144 255)0% , 
        rgb(98 189 252 )100%
    );
    --shadow:0px 0px 20px 0px rgb(132 144 255 / 20%);                                       /*  shadow of language  */
    --shadoeSupport: 0px 20px 20px 0px rgb(132 144 255 / 30%);


    --navbar-bottom : rgb(219, 200, 200);

    --edu-color:gray;

}

html{
    font-size: 62.5%;
    /* 1rem=10px */
    overflow-x: hidden;
}

body{
    overflow-x: hidden;
}

h1,h2,h3,h4{
    font-family: "Arvo", cursive;
}
h1{
    color: var(--heading);
    font-size: 6rem;
    font-weight: 600;
}

h3{
    font-size: 1.8rem;
    font-weight: 400;
}

p{
    color: var(--para);
    line-height: 1.6;
    font-size: 1.7rem;
}

a{
    text-decoration: none;
}

li{
    list-style: none;
}

/* ==============================================================
Header Section start
============================================================= */

.header{
    padding: 0 4.8rem;
    height: 10rem;
    background-color: var(--bg);  

    border-bottom:2px solid var(--navbar-bottom);   
     
    /* for navbar items manipulation */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header .logo{
      height: 8rem;
      cursor: pointer;
}

/* to display lists in horizontal --- apply css on parent class */

.navbar-lists{
    display: flex;
    gap: 4.8rem;
}

.navbar-link:link,
.navbar-link:visited{
    display: inline-block;
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--black);
    transition: color 0.3s linear;            /*  //after hover change color in 0.3sec */

} 

  
.navbar-link:hover,
.navbar-link:active{
    color: var(--helper);
    
}


/* responsive header  */

.mobile-navbar-btn{
    display: none;
    background-color: transparent ;
    cursor: pointer;
    border: none;
}

.mobile-nav-icon[name="close-outline"]{
    display: none;
}


/* sticky Navbar */
.sticky .header {
  position: fixed;
  top: 0;
  left: 0; 
  width: 100%;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.1);
  z-index: 9999;
  padding-top: 0;
  padding-bottom: 0;
}

.sticky .section-hero{
    margin-top: 10rem;
}
 


/* ==============================================================
Reusable css code
============================================================= */

.section{
    padding: 9rem 0;
}

.container {
    max-width: 140rem;
    margin: 0 auto;
}


.grid{
    display: grid;
    gap:9rem;
}

.grid-three-column{
     grid-template-columns: repeat(3,1fr);
       /* grid-template-columns: 1fr 1fr 1fr;   */
}

.grid-four-column{
    grid-template-columns: repeat(4,1fr);
      /* grid-template-columns: 1fr 1fr 1fr 1fr;   */
}

.grid-two-column{
    grid-template-columns: repeat(2,1fr);
      /* grid-template-columns: 1fr 1fr;   */
}



.btn{
    background: var(--gradientSupport);
    padding: 1.6rem 3.2rem;
    border:  none;
    border-radius: 10px;
    color: var(--helper-tint);
    display: inline-block;
    text-transform: uppercase;
    font-size: 1.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease 0s ;
    -moz-transition: all 0.3s ease 0s ;
    -o-transition: all 0.3s ease 0s ;
}

.btn:hover,
.btn:active{
    box-shadow: var(--shadoeSupport);
    
}

.common-heading{
    font-size: 4.0rem;
    font-weight: 600;
    margin-bottom: 6rem;
    text-transform: capitalize;
    position: relative;
}

.common-heading::before{
    content: "";
    position: absolute;
    top: 110%;
    left: 0;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--helper);
    border-radius: 50%;

}

.common-heading::after{

    content: "";
    position: absolute;
    top: 118%;
    left: 1.5rem;
    min-width: 20rem;
    height: 0.3rem;
    background-color: var(--helper);

}

/* ==============================================================
Hero Section
============================================================= */



.section-hero{
    background : var(--bg);
}

.section-hero-data {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: flex-start;  */
}





/* .section-hero-data{margin-left: 10rem;} */




.hero-top-data{
    text-transform: capitalize;
    font-weight: 500;
    font-size: 3rem;
    color: var(--helper);

}

.hero-heading{
    text-transform: uppercase;
    font-weight: 700;
    font-size: 4.5rem;
}

.hero-para{
    margin-top: 1.5rem;
    margin-bottom: 5rem;
    max-width: 60rem;
}

.section-hero-image{
    display: flex;
    justify-content: center;
    align-items: center; 
}

.hero-img{
    max-width: 80%;  
    box-shadow: 0px 0px 20px 5px rgb(99, 91, 91);
    border-radius: 200px;
}
 

/* ==============================================================
Bio Section
============================================================= */

 

.edu{
    font-size: 1.4rem;
    color: var(--edu-color);
}

.bio-image{
    display: flex;
    justify-content: center;
    align-items: center;
    /* filter: drop-shadow(5px 5px 10px rgb(164, 91, 177)); */
    /* margin-left: 7rem; */
}

.bio-image img{
    width: 100%;
    /* box-shadow: -2rem -2rem 0 0 var(--helper) ; */
    display: inline-block;
}

/* .bio-data{
    width: 88%;
} */

.bio-data-stats{
    display: flex;
    padding: 6.4rem 0;
    flex-direction: column ;
    gap: 3rem;
}

.bio-stats h3{
    margin-bottom: 1rem;
}

.bio-progress-bar{
    width: 90%;
    height: 0.8rem;
    background-color: var(--para-tint);
    border-radius: 10rem;
    position: relative;
    box-shadow: var(--shadow);
}

.bio-progress-bar::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 85%;
    height: inherit;
    background: var(--gradientSupport);
    border-radius: 10rem;

}

.bio-progress-bar-2::before{
    width: 80%;
}
.bio-progress-bar-3::before{
    width: 75%;
}
.bio-progress-bar-4::before{
    width: 65%;
}
.bio-progress-bar-5::before{
    width: 50%;
}

.bio-progress-bar span{
    position: absolute;
    top: 1.8rem;
    width: 4rem;
    height: 2rem;
    background: var(--helper);
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    outline: 0;

}

.bio-progress-bar span{
    left: 81%;
}
.bio-progress-bar-2 span{
    left: 76%;
}

.bio-progress-bar-3 span{
    left: 71%;
}

.bio-progress-bar-4 span{
    left: 61%;
}

.bio-progress-bar-5 span{
    left: 46%;
}

/* to create the caret ^ */

.bio-progress-bar span::after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 0.8rem solid var(--helper);
    border-color: transparent;
    border-bottom-color: var(--helper);
    top: -1.6rem;
}


/* ==============================================================
portfolio section
============================================================= */

 .section-portfolio{
    background: var(--bg);
    transition: all 0.7s linear;
}

.section-portfolio p{
    max-width: 60rem;
}

.p-btns{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3.2rem;
    margin-top: 6.4rem;

}

 .portfolio-images{
    gap:3.2rem;
    margin-top: 6.4rem;
 }

 .portfolio-images img{
    width: 100%;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
 }

 .img-overlay{
    position: relative;
    overflow:hidden ;
 }

 .img-overlay .overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background : var(--gradientSupport);
    opacity: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    transform: translateY(100%);

    transition: all 0.4s linear;
    border-radius: 10px;


 }

 .img-overlay:hover > .overlay{

    transform: translateY(0);
    opacity: 0.8;
    cursor: pointer;

 }

 .img-overlay .common-heading{
    margin: 0;
    color: var(--white);
    text-decoration: none;
    font-size: 2.8rem;
 }

 

 .p-btn-active{
    transform: translateY(-1rem) ;
 }

 .p-image-not-active{
    display: none;
 }


 .gitcode{
    display: flex;
    flex-direction: column; 
    align-items: center;
 }
 


 .gitcode1{
    background: white;
    padding: 1rem 2rem;
    border:  none;
    border-radius: 15px;
    color: var(--helper-tint);
    display: inline-block;
    text-transform: uppercase;
    font-size: 1.8rem;
    font-weight: 500;
    cursor: pointer; 
 }

.gitcode1:hover,
.gitcode1:active{
    background-color: rgb(120, 183, 120);
    
}


/* ==============================================================
Work data section
============================================================= */

.section-work-data{
    background: var(--gradientSupport);
    text-align: center;
    transition: all 0.7s linear;
    color: var(--white);
   
}

.counter-numbers{
    font-size: 4.8rem;
    
}

.section-work-data h2{
    font-size: 3rem;
}

.section-work-data p{
    color: var(--white);
    text-transform: capitalize;
}

/* ==============================================================
Skill section
============================================================= */

.section-skill{
    transition: all 0.7s linear;
}

.section-skill p{
    max-width: 60rem;
}

.section-skill .grid{
    margin-top: 1rem;
    row-gap: 10rem;
}

.skill-box{
    text-align: center;
    box-shadow: var(--shadow);
    border-radius: 5px;
    padding: 2rem 2rem;
    transition: all 0.2s linear;
}
 
.skill-box:hover,
.skill-box:active{
    transform: translateY(-3rem);
}

.skill-img{
    width: 5rem;
    height: 5rem;
    background-color: rgba(144,172,209,0.2) ;
    display: inline-block;
    
}

.skill-box h3{
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

/* ==============================================================
                 freelancing section
============================================================= */

.section-freelancing{
     background-image: url("../images/folio/3.jpg");
     background-repeat: no-repeat;
     background-size: 100%;
     background-attachment: fixed;
     position: relative;
     transition: all 0.7s linear ;
     text-align: center;
}

.section-freelancing .overlay{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: var(--helper);
    background-color: #3e64ff;
    opacity: 0.7;
}

.section-freelancing .container{
    position: relative;
}

.section-freelancing h2{
    font-size: 5.4rem;
}

.section-freelancing span{
    color: #a0f669;
}

.section-freelancing h2, .section-freelancing p{
    color: var(--white);
    margin-bottom: 1.8rem;
}


/* ==============================================================
                  Contact Section
============================================================= */

.section-contact-main{
    max-width: 70rem;
    margin: 0 auto;
    margin-top: 9rem;
    transition: all 0.3s linear;
     
}

.section-contact-main .grid{
    gap: 3.2rem ;
}

.section-contact-main form{
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

.section-contact-main input,
.section-contact-main textarea{
   padding: 1.5rem 2rem;
   border: 0.1rem solid #c9c9c9;
   border-radius: 5px;
   font-size: 1.6rem;
   font-family: "work sans";
   width: 100%;
}

.section-contact-main input[type="submit"]{
      max-width: 30%;
      border:none; 
}


/* ==============================================================
                  Footer Section
============================================================= */

.section-footer{ 
    transition: all 0.7s linear;

    background: linear-gradient(300deg ,#6d0493,#433c89 ,rgb(0 10 45));
    background-size: 180% 180%;
    animation: gradient-animation 6s ease infinite; 
}

 
@keyframes gradient-animation {
    0%{
        background-position: 0% 50%;
    }
    50%{
        background-position: 100% 50%;
    }
    100%{
        background-position: 0% 50%;
    }
}








.section-footer h3{
    color: var(--white);
    margin-bottom: 4rem;

}

.f-about{
    color: #adadad;
}

.f-link ul,
.f-services ul,
.f-address address{
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    justify-content: center;
}

.f-link li,
.f-link a,
.f-services li,
.f-services a{
    font-size: 1.8rem;
    color: #adadad;
    text-transform: capitalize;
}

.f-link span,
.f-services span,
.f-address span{
    margin-right: 1rem;
}

.f-address p,
.f-address p a {
    font-style: normal;
    color: #adadad;
}

.f-social-icons{
    margin: 5rem 0;
    text-align: center;
    color: #adadad;
}

.f-social-icons .icons{
    width: 4rem;
    height: 4rem;
    background-color: rgba(144,172,209,0.2) ;
    display: inline-block;
    padding: 1.4rem 1.8rem;
    position: relative;
    color: var(--white );

    animation: water-wave 3s linear infinite;
}

@keyframes water-wave {
    0% {
      border-radius: 56% 44% 70% 30% / 30% 54% 46% 70%; 
    }
    50% {
      border-radius: 3% 97% 15% 85% / 72% 0% 100% 28%;
      
    }
    100% {
      border-radius: 56% 44% 70% 30% / 30% 54% 46% 70%;
    }
  }

  .f-credis p{
    text-align: center;
    color: #adadad;
  }

  .section-footer a:hover,
  .section-footer a:active {
    color: var(--white);
      
  }

  /* ==============================================================
                   scroll section start
============================================================= */

.scrollTop-style{
    position: fixed;
    right: 2%;
    bottom: 5%;
    /* z-index: 1; */
}

.scroll-top{
    width: 4rem;
    height: 4rem;
    background: var(--helper);
    display: inline-block;
    padding: 1.4rem 1.8rem;
    position: relative;
    color: var(--white);
    animation: water-wave 3s linear infinite;
    cursor: pointer;
    
}


  /* ==============================================================
                   media queries
============================================================= */

    /* 1em = 16px  */

    /* for 1500 px */

@media(max-width:95em){              /* 1500px*/

    .container{
        max-width: 130rem;
        padding: 0 3.2rem;
    }

    .navbar-lists{
        gap: 3.2rem;
    }

}

/* target 1200px =  75em*/

@media(max-width:75em){
    html{
        font-size: 56.25%;
    }

    .container{
        max-width: 110rem;
    }

    .grid{
        gap: 4.8rem;
    }
}


@media(max-width:980px){

    html{
        font-size: 50%;
    }

    .header{
        position: relative;
    }

    /* .header .logo{
         
        height: 10rem;
     } */

    .mobile-navbar-btn{
        display: block;
        z-index: 9999;
        border: 3px solid var(--black);
        color: var(--black);
    }

    .mobile-nav-icon{
        width: 5rem;
        height: 5rem;
        color: var(--black);
    }

    .header .logo{
        width: 40%;
    }

    .navbar{
        width: 100%;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
        background: var(--gradient);

        display: flex;
        justify-content: center;
        align-items: center;

        transform: translateX(100%);
        transition: all 0.5s linear;

        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        z-index: 9999;
    }

    .navbar-lists{
        flex-direction: column;
        align-items: center;
    }
    
    .navbar .navbar-lists .navbar-link:link,
    .navbar .navbar-lists .navbar-link:visited{
        color: var(--black);
        font-size: 3.2rem;
    }

    .active .navbar{
        transform: translateX(0%); 

        visibility: visible;
        opacity: 1;
        pointer-events:auto;
        /* z-index: 9999; */
    }

    .active .mobile-navbar-btn .mobile-nav-icon[name="menu-outline"]{
        display: none;
    }
    
    .active .mobile-navbar-btn .mobile-nav-icon[name="close-outline"]{
        display: block;
        width: 5rem;
        height: 5rem;
    }

    .hero-section h1{
        line-height: 1.05;
    }

    .section-skill .grid{
        gap: 6rem;
    }

    .section-skill .grid-four-column{                           /*Make 3 columns*/
        grid-template-columns: repeat(3,1fr);

    }

    .section-footer .grid-four-column{                          /*Make 2 columns*/
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:50em){
    .container{
        max-width: 71rem;
    }

    

    .section-hero .grid-two-column{                 /*Make 1 columns*/    
        grid-template-columns: 1fr;
    }
    .section-hero-data{
         align-items: center;
    }
    .hero-para{
        text-align: center ;
    }
    .section-hero img{
        width: 70%;
        
    }

    /* .biodata  */

    .section-biodata .grid-two-column{
        grid-template-columns: 1fr;
    }

    .section-biodata .bio-image{
        grid-row-start: 2;
           grid-row-end: 3;
        /* grid-row: 2/3; */
        margin-top: 3.2rem;
    }

    .section-biodata .bio-image img{
        width: 50%;
    }

    /* porstfolio section  */
    .section-portfolio .grid-three-column{
        grid-template-columns: 1fr 1fr;
    }

    /* work data  */
    .section-work-data .grid-four-column{
        grid-template-columns: 1fr 1fr;
    }

}

/* below 560 px */

@media(max-width:35em){        /*560px*/
     /* .container{
        max-width: 48rem;
     } */

     .header{
        padding: 0 3.2rem;
     }

     .header .logo{
        width: 50%;
     }

     .hero-top-data{
        font-size: 2.5rem;
     }

     .hero-heading{
        display: flex;
        text-align: center;
        font-size: 3.5rem;
     }

     /* pordtfolio */

     .p-btns{
        gap: 2.8rem;
     }

     .btn{
        padding: 1rem 2rem;
     }

     /* skill-section */
     .section-skill .grid-four-column{
        grid-template-columns: 1fr 1fr;
     }
     .skill-box{
        padding: 1rem 2rem;
     }

     /* freelancer */
     .section-freelancing h2{
        font-size: 3rem;
     }

     /* contact form  */
     .contact-container .grid-two-column{
        grid-template-columns: 1fr;
     }
     .contact-container{
        padding: 0 4rem;
     }
     .contact-container .btn{ 
        font-size: 1.2rem;
        display: flex;
        justify-content: center;
        align-items: center;
     }

     /* Footer for mobilr  */

     .section-footer .f-about,
     .section-footer.f-address{
        grid-column: 1/-1; 
     }

     .mobile-nav-icon{
        width: 3rem;
        height: 3rem;
     }
     .active .mobile-navbar-btn .mobile-nav-icon[name="close-outline"]{
        width: 3rem;
        height: 3rem;
     } 
}
 

 